<extend name="./Public/Home/master.html" />
<block name="title">
    </div>

    </div>
    <!--导航结束-->
    <link rel="stylesheet" href="__PUBLIC__/Home/layer/skin/default/layer.css">
    <script src="__PUBLIC__/Home/layer/layer.js" type="text/javascript" charset="utf-8"></script>
    <div class="clear"></div>

    </div>
    <script>
        $(function(){
            area.init('area');
            //默认选中效果
            area.selected('湖南','长沙','雨花区');
        })
    </script>
    <!--头部结束-->
    <!--中间开始-->
    <div id="content">

        <div class="ordercontent main">
            <div class="orderleft">
                <div class="ordertitle">
                    <h1>个人中心</h1>
                    <ul>
                        <li>
                            <a href="{:U('index')}">我的订单<span>&gt;</span></a>
                        </li>
                        <li>
                            <a href="">个人信息<span>&gt;</span></a>
                        </li>
                        <li>
                            <a href="">退货记录<span>&gt;</span></a>
                        </li>
                        <li>
                            <a href="{:U('Home/MyCenter/addess')}">管理地址<span>&gt;</span></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="orderright">
                <div class="orderlist">
                    <h2>管理地址</h2>

                    <div class="body-center" style="width:100%;margin:0">
                        <div class="center-content">
                            <!--头部开始-->
                            <div class="content-header">
                                <p>收获地址  <span>温馨提示：为了保证您的权益，防止黄牛倒卖，订单进入正在配货状态将不能修改收货地址和发票信息！</span></p>
                            </div>
                            <!--头部结束-->
                            <!--地址选择开始-->
                            <div class="content-address">
                                <div class="addressList">
                                    <foreach name="oldUserData" item="vo" key="k">
                                        <div class="consignee-item">
                                            <span class="radio-img <if condition="$vo['status']==1"> pitchOn </if>"></span>
                                            <label for="adress1" class="radio">
                                                <input type="radio" name="adress" id="adress1" class="radio-select" value=""/><span class="e-name">{$vo['name']}</span>，<span class="city">{$vo['city']}</span><span class="city-particular">{$vo['addess']}</span>，<span class="codeNumber">{$vo['phone']}</span>
                                                <input type="hidden" class="postcodes" name="postcodes" value="{$vo['postcodes']}">
                                            </label>
                                            <span class="compile"><a class="copyreader" href="javascript:;" adid="{$vo['adid']}">编辑</a></span>
                                        </div>
                                    </foreach>
                                </div>
                                <!--添加新地址-->

                                <div class="consignee-item new-ress addAdress_span">
                                    <span class="radio-img"></span>
                                    <label for="adress3" class="radio"><input type="radio" name="adress" id="adress3" class="radio-select"  value=""/>使用新地址</label>
                                </div>
                                <!--添加地址框-->
                                <div class="add-address new addAdress_form">
                                    <form id="form" action="" method="post">
                                        <div class="s-name">
                                            <h3 class="style"><b>*</b>收货人姓名</h3>
                                            <input type="text" class="public" name="name" id="name" placeholder="收货人姓名" value="" />
                                        </div>
                                        <div class="address-s">
                                            <h3 class="style"><b>*</b>地址</h3>

                                            <!--城市联动-->
                                            <select name="city[]" id="area1"></select>
                                            <select name="city[]" id="area2"></select>
                                            <select name="city[]" id="area3"></select>
                                            <!--<input type="text" name="name" id="name" placeholder="收货人姓名" value="" />-->
                                            <textarea name="addess" placeholder="路名或街道地址，门牌号 " id="particular" rows="" cols=""></textarea>
                                        </div>

                                        <div class="postcode">
                                            <h3 class="style"><b>&nbsp;</b>邮政编码</h3>
                                            <input type="text" class="public" name="postcodes" id="postcode" placeholder="6位邮政编码" value="" />
                                        </div>
                                        <div class="shouji">
                                            <h3 class="style"><b>*</b>手机号码 </h3>
                                            <input type="text" class="public" name="phone" id="shouji" placeholder="11位手机号码" value="" />
                                        </div>
                                        <div class="btn-group">
                                            <input type="submit"  class="btn" id="btn-bao" value="保存"/>
                                            <a href="javascript:;" class="btn-qu btn">取消</a>
                                        </div>

                                    </form>
                                </div>

                                <!--异步添加地址选择开始-->
                                <script>
                                    $(function(){
                                        $('#form').submit(function(){
//                        序列化获得当前的表单数据
                                            var data =$(this).serialize();
                                            $.post("{:U('Home/Order/ajaxAddadess')}",data,function(res){
//                            当res为真时
                                                if(res){
//                                让添加地址按钮显示
                                                    $('.new-address').show();
//                                让添加地址框隐藏，选项隐藏
                                                    $('.new-ress,.new').hide();
//                                防止页面刷，新将添加好的地址放入收货地址中
                                                    var  html = ' <div class="consignee-item">'+
                                                        ' <span class="radio-img pitchOn"></span>'+
                                                        '<label for="adress1" class="radio">'+
                                                        '<input type="radio" name="adress" id="adress1" class="radio-select" value=""/><span class="e-name">'+res.name+'</span>，<span class="city">'+res.city+'</span><span class="city-particular">'+res.addess+'</span>，<span class="codeNumber">'+res.phone+'</span>'+
                                                        '</label>'+
                                                        '<span class="compile"><a class="copyreader" href="javascript:;" adid="'+res.adid+'">编辑</a></span>'+
                                                        '</div>';
//                                将收货地址中的选中取消
                                                    $('.consignee-item .radio-img').removeClass('pitchOn');
//                                将添加好的这条放入收货地址中
                                                    $('.addressList').append(html);
//                                 将编辑的地址抓取到底部显示
                                                    setAddress($('.consignee-item .copyreader[adid='+res.adid+']'));
                                                }else if(res==0){
//                                添加失败
                                                    layer.msg('很抱歉！添加失败，请完整填写地址内容',function(){
                                                    });
                                                    return false;
                                                }

                                            },'json');
//                        阻止表单提交
                                            return false;
                                        })
                                    })
                                </script>
                                <!--异步添加地址选择结束-->

                                <!--添加地址按钮-->
                                <a href="javascript:;" class="new-address "></a>
                                <!--添加新地址结束-->
                                <!--编辑开始-->
                                <div class="add-address edit">
                                    <form action="" method="post">
                                        <div class="s-name">
                                            <h3 class="style"><b>*</b>收货人姓名</h3>
                                            <input type="text" class="public" name="name" id="name" placeholder="收货人姓名" value="" />
                                        </div>
                                        <div class="address-s">
                                            <h3 class="style"><b>*</b>地址</h3>

                                            <!--城市联动-->
                                            <select name="city[]" id="area_1"></select>
                                            <select name="city[]" id="area_2"></select>
                                            <select name="city[]" id="area_3"></select>
                                            <!--<input type="text" name="name" id="name" placeholder="收货人姓名" value="" />-->
                                            <textarea name="addess" placeholder="路名或街道地址，门牌号 " id="particular" rows="" cols=""></textarea>
                                        </div>

                                        <div class="postcode">
                                            <h3 class="style"><b>&nbsp;</b>邮政编码</h3>
                                            <input type="text" class="public" name="postcodes" id="postcode" placeholder="6位邮政编码" value="" />
                                        </div>
                                        <div class="shouji">
                                            <h3 class="style"><b>*</b>手机号码 </h3>
                                            <input type="text" class="public" name="phone" id="shouji" placeholder="11位手机号码" value="" />
                                        </div>
                                        <div class="btn-group">
                                            <!--用js将当前编辑的这一条的adid抓过来-->
                                            <input type="hidden" id="adid" name="adid"  value="1">
                                            <input type="submit"  class="btn" id="btn-bao" value="保存"/>
                                            <a href="javascript:;" class="btn-qu btn">取消</a>
                                        </div>

                                    </form>
                                </div>
                            </div>
                            <!--地址选择结束-->
                            <!--地址编辑开始-->
                            <script>
                                $(function(){
//                    定义表单事件
                                    $('.edit form').submit(function () {
//                        序列化当前的表单的数据
                                        var data = $(this).serialize();
//                      发送ajax请求
                                        $.post("{:U('Home/Order/ajaxEditAddess')}",data,function (res) {
//                            对结果进行处理
                                            if(res){
//                                让编辑隐藏
                                                $('.edit').hide();
//                                抓地址栏的地址内容
                                                var  html = ' <div class="consignee-item">'+
                                                    ' <span class="radio-img pitchOn"></span>'+
                                                    '<label for="adress1" class="radio">'+
                                                    '<input type="radio" name="adress" id="adress1" class="radio-select" value=""/><span class="e-name">'+res.name+'</span>，<span class="city">'+res.city+'</span><span class="city-particular">'+res.addess+'</span>，<span class="codeNumber">'+res.phone+'</span>'+
                                                    '<input type="hidden" class="postcodes" name="postcodes" value="'+res.postcodes+'">'+
                                                    '</label>'+
                                                    '<span class="compile"><a class="copyreader" href="javascript:;" adid="'+res.adid+'">编辑</a></span>'+
                                                    '</div>';
//                                将新编辑成功的写入地址栏，指定的 HTML 内容或元素替换被选元素。
                                                $('.addressList .consignee-item .copyreader[adid='+res.adid+']').parents('.consignee-item').replaceWith(html);
//                                让其他兄弟元素的背景图消失
                                                $('.consignee-item').find('.radio-img').removeClass('pitchOn');
//                                选中所编辑的地址
                                                $('.consignee-item .copyreader[adid='+res.adid+']').parents('.consignee-item').find('.radio-img').addClass('pitchOn');
//                                将编辑的地址抓取到底部显示
                                                setAddress($('.consignee-item .copyreader[adid='+res.adid+']'));
                                            }else if(res==0){
//                                  添加失败
                                                layer.msg('很抱歉！添加失败，请完整填写地址内容');
                                            }
                                        },'json')
//                        阻止表单提交
                                        return false;
                                    })
                                })
                            </script>
                            <!--地址编辑结束-->
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
    </div>
    <!--中间结束-->
</block>